import React from 'react';
import { Layout } from 'antd';
import { Outlet } from 'umi';
import HeaderBar from './components/HeaderBar/HeaderBar';
import SideMenu from './components/SideMenu/SideMenu';
import './BasicLayout.less';

const { Content } = Layout;

/**
 * 基础布局组件
 * 包含头部导航、侧边菜单和内容区域
 * 使用umi的Outlet渲染子路由
 */
const BasicLayout: React.FC = () => {
  return (
    <Layout className="basic-layout">
      {/* 头部导航栏 */}
      <HeaderBar />
      
      <Layout>
        {/* 侧边菜单 */}
        <SideMenu />
        
        {/* 内容区域 */}
        <Layout className="content-layout">
          <Content>
            <div className="content">
              <Outlet />
            </div>
          </Content>
        </Layout>
      </Layout>
    </Layout>
  );
};

export default BasicLayout;